<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 状态动画与侦听器 -->
        <input v-model.number="number" type="number" step="20" />
        <p>{{animatedNumber}}</p>
        <br>
        <!-- 
            当你把数值更新时，就会触发动画。这个是一个不错的演示，但是对于不能直接像数字一样存储的值，
            比如 CSS 中的 color 的值，通过下面的例子我们来通过 Tween.js 和 Color.js 实现一个例子：
         -->
        <input v-model="colorQuery" @keyup.enter="updateColor" placeholder="输入一个颜色值" />
        <button type="button" @click="updateColor">Update</button>
        <p>Preview:</p>
        <span :style="{backgroundColor:tweenedCSSColor}" class="example-7-color-preview"></span>
        <p>{{tweenedCSSColor}}</p>
    </div>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/tween.js/16.3.4/Tween.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/color-js/1.0.1/color.js"></script>
    <script>
        var Color = net.brehaut.Color

        new Vue({
            el:'#app',
            data:{
                number:0,
                tweenedNumber:0,
                colorQuery:'',
                color:{
                    red:0,
                    green:0,
                    blue:0,
                    alpha:1
                },
                tweenedColor:{}
            },
            created:function(){
                this.tweenedColor=Object.assign({},this.color)
            },
            computed:{
                animatedNumber:function(){
                    return this.tweenedNumber.toFixed(0);
                },
                tweenedCSSColor:function(){
                    return new Color({
                        red:this.tweenedColor.red,
                        green:this.tweenedColor.green,
                        blue:this.tweenedColor.blue,
                        alpha:this.tweenedColor.alpha
                    }).toCSS()
                }
            },
            watch:{
                number:function(newValue){
                    gsap.to(this.$data,{duration:0.5,tweenedNumber:newValue})
                },
                color:function(){
                    function animate(){
                        if(TWEEN.update()){
                            requestAnimationFrame(animate)
                        }
                    }

                    new TWEEN.Tween(this.tweenedColor)
                            .to(this.color,750)
                            .start()

                    animate()
                }
            },
            methods:{
                updateColor:function(){
                    this.color=new Color(this.colorQuery).toRGB()
                    this.colorQuery=''
                }
            }
        })
    </script>
    <style>
        .example-7-color-preview{
            display: inline-block;
            width: 50px;
            height: 50px;
        }
    </style>
</body>
</html>